import Vue from "vue";
import Vuex from "vuex";

import persistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export default new Vuex.Store({

    //存放共享数据
    state: {
        /**
         * 页面获取： 1.this.$store.state.count
         *           2.将全局数据，映射为当前组件的计算属性
         *              从vuex中按需求导入mapState函数
         *                import {mapState} from 'vuex'
         *                computed :{ ...mapState(['count']) }
         */
        // count: 0
        //权限列表
        permissionList: [],
        //按钮权限列表
        btnMenu:[],
        empInfo: null,
    },
    //persistedState 实现数据持久化，防止页面刷新导致store数据丢失,数据保存在sessionStorage里面
    plugins: [
        persistedState({storage: window.sessionStorage})
    ],
    //Getter于对Store中的数据进行加工处理形成新的数据。他不会修改state中的原始数据起到的是包装数据的作用
    //①Getter 可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。
    //②Store 中数据发生变化，Getter 的数据也会跟着变化。
    getters: {
        /**
         *
         * 页面调用  1.this.$store.getters.名字是的调用getters第一 种方式
         *          2.从vuex中按需求导入mapState函数
         *              import {maptGetters} from 'vuex'
         *
         *         通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
         *              将指定的mutations函数,映射为当前组件的methods函数
         *              computed :{ ...maptGetters(['getCount']) }

         *
         *
         *
         *
         */
        // getCount(state) {
        //     return state.count
        // }

        getPermissionList(state) {
            return state.permissionList
        },
        getBtnMenu(state){
            return state.btnMenu
        }

    },
    //用于变更state的数据
    //只有mutation定义的函数才有权利修改state中的数据
    mutations: {
        /**
         * 注：不能写异步的代码，否者前端页面数据修改，state数据不修改
         * state为Store里的state,ste为函数传递的参数
         *
         * 页面调用   1.this.$store.commit("addCount",3)   commit就是调用摸个mutations的函数
         *           2.从vuex中按需求导入mapState函数
         *             import {mapMutations} from 'vuex'
         *             通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
         *             将指定的mutations函数,映射为当前组件的methods函数
         *             methods:{ ...mapMutations(['addCount']) }
         *             然后再调用该函数 this.addCount(3)
         */
        // addCount(state, step) {
        //     state.count += step
        // }

        //设置值
        setPermissionList(state, list) {
            state.permissionList = list
        },
        setEmpInfo(state, data) {
            state.empInfo = data
        },
        setBtnMenu(state,menu){
            state.btnMenu = menu
        }
    },
    //处理异步任务，如发送网络请求获取数据
    //如果通过异步操作变更数据，必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据
    actions: {

        // addAsync(context, step) {
        //     /**
        //      * 页面调用函数 1. this.$store.dispatch('addAsync',3)
        //      *             2.从vuex中按需求导入mapState函数
        //      *              import {maptActions} from 'vuex'
        //      *              通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
        //      *              将指定的mutations函数,映射为当前组件的methods函数
        //      *              methods:{ ...maptActions(['addCount']) }
        //      *              然后再调用该函数 this.addAsync(3)
        //      *
        //      * 注:在actions中不能直接修改state数据 必须使用context(state).commit()去触发mutation
        //      */
        //     setTimeout(() => {
        //         context.commit('addCount', step);
        //     }, 1000);
        // },

        //发送请求获取权限树
        getPermissionList(state, that) {
            return new Promise((resolve, reject) => {
                that.$get("/permission/treeList", {empId: that.empId}).then(res => {
                    if (res.code === 200) {
                        //console.log(res.data);
                        state.commit("setPermissionList", res.data);
                    }
                }).catch(error => {
                    reject(error)
                });
            })

        },
        getBtnMenu(state,that){
            return new Promise((resolve, reject) => {
                that.$post("/btnMenu/getBtnMenu", {id: that.empId}).then(res => {
                    if (res.code === 200) {
                        //console.log("btnMenu",res.data);
                        state.commit("setBtnMenu", res.data);
                    }
                }).catch(error => {
                    reject(error)
                });
            })
        }

    },
    modules: {}
});
